Design programs for interactive graphical designs, such as web sites, often allow users to create designs by breaking the design into discrete design elements that can be individually specified. Just as in static illustrations, design elements in an interactive graphical design can have properties such as content, location, size, and color. However, in an interactive graphical design, these static properties can change when the design element is placed into different states as the user interacts with the design. For example, the outline of a button may darken when it is selected. The two states of such a button would be a “default” state and a “selected” state.
Documenting the characteristics of all the various design elements in an interactive graphical design can be difficult because of their varying characteristics. Documentation is most useful when it provides specific information about how a design element appears and what the design element does. However, as the state of a design element can vary widely, and in some cases is dependent upon the state of other design elements, the documentation needed for an entire design may either be too voluminous to provide any value, or be an incomplete picture of the design. In the field of web site design, the complexity of each individual page continues to increase as user interface designers strive to achieve numerous goals with a single page. At the same time, this increased complexity has necessitated ever more comprehensive documentation as nearly every web designer needs to explain the operation of their design to other stakeholders in the design process.
Exemplary documentation for an interactive graphical design can be described with reference to FIG. 1. In FIG. 1, a design element 100 is documented by documentation 110. As illustrated, design element 100 comprises a simple member sign up interface. Documentation 110 will generally be produced in a common word processing format or portable document format. Documentation for an interactive graphical design can be divided into sections where each section describes the appearance and operation of a design element. Documentation 110 shows a single section dedicated to design element 100 and includes an image 111 and a prose description 112.
Traditionally, web site designs have provided fairly basic interactivity such as clicking on a link and navigating to a new page. With these kinds of designs, documentation was so simple that a user could effectively document an entire web site using a basic image capture tool to capture a static image of particular design elements, and then paste the image into the documentation. The addition of a few lines of prose to the captured images, such as description 112, would provide the details required to describe the interactivity of the design element. However, even the basic design exhibited by web page portion 100 is difficult to fully describe via documentation. For example, the final entry in the interactivity section of description 112 says that the outline of the submit button darkens when the button is selected, but since it doesn't show exactly how the outline darkens, a reviewing stakeholder and the web page designer might not be on the same page in terms of how that interactivity is meant to appear in the finished design. Documenting even this simple design would therefore require at least two screen captures.
Complex interactive graphical designs are increasingly difficult to document. As mentioned, static image capture tools are inefficient for fully documenting the interactivity of complex designs. Although dynamic tools exist that automatically divide a design into elements and automatically generate basic descriptions for those design elements, they don't provide sufficient flexibility to a user and will often generate superfluous or incomplete documentation. A user needs to be provided with flexibility to define the scope of the documentation so that it is neither overcrowded with useless information, nor devoid of information regarding critical design details. Documentation is an important aspect of the design process for interactive graphical designs as it allows designers to communicate their ideas, share their progress, and get input on how the design is progressing. Therefore, methods and systems directed to improving the efficiency and efficacy of the documentation process are of significant and increasing importance.